<template>
  <textarea
    :value="modelValue"
    class="w-full h-full text-gray-800 leading-normal shadow-none py-1 bg-transparent border-none outline-none focus:(outline-none ring-0)"
    @input="onInput"
  ></textarea>
</template>
<script lang="ts" setup>
import { useDebounceFn } from "@vueuse/core";

defineProps({
  modelValue: String,
});

const emit = defineEmits(["update:modelValue"]);

const onInput = useDebounceFn((e: Event) => {
  const value = (e.target as HTMLInputElement).value;
  emit("update:modelValue", value);
}, 200);
</script>
